<template>
  <div class="show-history-page">
    <a-spin :spinning="loading">
      <div>
        <vxe-table :data="formState.itemList" border show-overflow ref="rateTable" height="900" :row-config="{ isHover: true }" :sort-config="{ trigger: 'cell' }">
          <vxe-column field="countryList" title="国家" min-width="200" fixed="left">
            <template #default="{ row }">
              <a-select v-model:value="row.countryList" style="width: 100%" mode="multiple" :max-tag-count="1" placeholder="请选择" allowClear>
                <a-select-option v-for="(item, index) in countryOpts" :key="index" :value="item.id">{{ item.countryRegionName }}</a-select-option>
              </a-select>
            </template>
          </vxe-column>
          <vxe-column field="region" title="分区" show-overflow="title" min-width="160" fixed="left">
            <template #default="{ row }">
              <a-input v-model:value="row.region" placeholder="请输入" allowClear></a-input>
            </template>
          </vxe-column>
          <vxe-column field="city" title="城市" show-overflow="title" min-width="160" fixed="left">
            <template #default="{ row }">
              <a-input v-model:value="row.city" placeholder="请输入" allowClear></a-input>
            </template>
          </vxe-column>
          <template>
            <vxe-colgroup v-for="(item, index) in formState.weightSegmentList || []" :key="index" :title="`${item.minValue}-${item.maxValue}`">
              <template v-if="['UNIT'].includes(item.type)">
                <vxe-column field="unitPrice" title="单价" min-width="140">
                  <template #default="{ row }">
                    <a-input-number v-model:value="row.detailsList[index].unitPrice" :min="0" placeholder="单价"></a-input-number>
                  </template>
                </vxe-column>
              </template>
              <template v-else-if="['AMOUNT'].includes(item.type)">
                <vxe-column field="amount" title="金额" min-width="140">
                  <template #default="{ row }">
                    <a-input-number v-model:value="row.detailsList[index].amount" :min="0" placeholder="金额"></a-input-number>
                  </template>
                </vxe-column>
              </template>
              <template v-else-if="item.type === 'CON_WEIGHT'">
                <vxe-column field="firstWeight" title="首重重量" min-width="140">
                  <template #default="{ row }">
                    <a-input-number v-model:value="row.detailsList[index].firstWeight" :min="0" placeholder="首重重量"></a-input-number>
                  </template>
                </vxe-column>
                <vxe-column field="firstPrice" title="首重价格" min-width="140">
                  <template #default="{ row }">
                    <a-input-number v-model:value="row.detailsList[index].firstPrice" :min="0" placeholder="首重价格"></a-input-number>
                  </template>
                </vxe-column>
                <vxe-column field="continuationWeight" title="续重重量" min-width="140">
                  <template #default="{ row }">
                    <a-input-number v-model:value="row.detailsList[index].continuationWeight" :min="0" placeholder="续重重量"></a-input-number>
                  </template>
                </vxe-column>
                <vxe-column field="continuationPrice" title="续重价格" min-width="140">
                  <template #default="{ row }">
                    <a-input-number v-model:value="row.detailsList[index].continuationPrice" :min="0" placeholder="续重价格"></a-input-number>
                  </template>
                </vxe-column>
              </template>
            </vxe-colgroup>
          </template>
          <!-- <vxe-column field="action" title="操作" min-width="90" fixed="right">
          <template #default="{ rowIndex }">
            <a-button type="link" danger @click="deleteRateHandle(rowIndex)">删除</a-button>
          </template>
        </vxe-column> -->
        </vxe-table>
      </div>
    </a-spin>
    <div class="modal-submit-btn-wrapper">
      <a-button type="primary" v-debounce @click="submitHandle">保 存</a-button>
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { inject, toRefs, watch } from "vue";
const countryOpts = inject<Array<Base.GeneraDataType>>("countryOpts");
console.log(countryOpts);
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: any;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
  (e: "historySubmit"): void;
}>();

const { visible, passData } = toRefs(props);
const { formState, loading, init } = InitHook({ passData });
const { submitHandle, cancelHandle } = OperationHook({ formState, emit, loading });

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.show-history-page{


    .modal-submit-btn-wrapper{
        :deep(.ant-btn){
            margin-right: 8px;
        }
    }
}
</style>
